<template>
	<pro-table
		ref="protable"
		:loadDataUrl="api.getList"
		rowKey="roleId"
		:columns="columns"
		:orgId="globalOrgId"
		:extendParam="{
			orgId: globalOrgId
		}" 
		:isAdd="$_has('sys:role:insert')"
		:isDelete="$_has('sys:role:delete')"
		@selectedRowChange="onSelectChange"
		@addRecord="addRecord"
		@showDeleteConfirm="showDeleteConfirm"
	>
		<span class="tag" :class="{ active: text == 1 }" slot="status" slot-scope="{ text, record }">{{ text == 0 ? '启用' : '停用' }}</span>
		<span slot="operation" slot-scope="{ text, record }" class="operation">
			<a href="javascript:;" v-if="record.roleCode!='super_admin'" v-has="'sys:role:update'" title="编辑" class="edit" @click="editRecord(record)">编辑</a>
			<a href="javascript:;" v-if="record.roleCode!='super_admin'" v-has="'sys:role:delete'" title="删除" class="del" @click="showDeleteConfirm(1, record.roleId, record.roleName)">删除</a>
			<a-dropdown  placement="bottomRight" v-if="record.roleCode!='super_admin'&&($_has('sys:role:bind') || $_has('sys:role:setRoleMenu') || $_has('sys:role:setRoleDept'))">
				<a class="add" @click="e => e.preventDefault()">更多操作</a>
				<a-menu slot="overlay">
					<a-menu-item @click="setRoleUser(record)" v-if="$_has('sys:role:bind')">
						<i class="iconfont icon-user"></i>
						分配用户
					</a-menu-item>
					<a-menu-item @click="setRoleMenu(record)" v-if="$_has('sys:role:setRoleMenu')">
						<i class="iconfont icon-power"></i>
						菜单权限
					</a-menu-item>
					<a-menu-item @click="setRoleDateScope(record)" v-if="$_has('sys:role:setRoleDept')">
						<i class="iconfont icon-data"></i>
						数据权限
					</a-menu-item>
				</a-menu>
			</a-dropdown>
		</span>
		<!-- 菜单权限 -->
		<role-join-menu-modal ref="roleJoinMenuModal" @ok="handlerRefresh"></role-join-menu-modal>
		<!-- 添加，编辑 -->
		<add-or-edit-role-modal :api="api" modalTitle="角色" editKey="roleId" ref="addOrEditModal" @ok="handlerRefresh"></add-or-edit-role-modal>
		<!-- 数据权限 -->
		<edit-role-data-modal ref="editRoleDataModal" @ok="handlerRefresh"></edit-role-data-modal>
	</pro-table>
</template>

<script>
import { rowSelection, recordOperation } from '@/mixins';
import { sysManageapi } from '@/api/index.js';
import roleJoinMenuModal from './module/roleJoinMenuModal';
import addOrEditRoleModal from './module/addOrEditRoleModal';
import editRoleDataModal from './module/editRoleDataModal';
const columns = [
	{
		title: '所属机构',
		dataIndex: 'orgName',
		key: 'orgName',
		searchInfo: {
			value: 'orgId',
			type: 'select',
			defaultValue: undefined,
			optionlist: []
		},
		ellipsis: true
	},
	{
		title: '角色名',
		dataIndex: 'roleName',
		key: 'roleName',
		searchInfo: {
			type: 'string',
			defaultValue: ''
		},
		ellipsis: true
	},
	{
		title: '状态',
		dataIndex: 'status',
		key: 'status',
		scopedSlots: { customRender: 'status' },
		searchInfo: {
			type: 'select',
			defaultValue: undefined,
			optionlist: [
				{
					value: 0,
					text: '启用'
				},
				{
					value: 1,
					text: '停用'
				}
			]
		}
	},
	{
		title: '创建时间',
		dataIndex: 'createTime',
		key: 'createTime',
		width: 180,
		customRender: function(t, r, index) {
			return r.createTime?r.createTime.slice(0,10):'';
		},
	},
	{
		title: '备注',
		key: 'remark',
		dataIndex: 'remark',
		width: 300,
		ellipsis: true
	},
	{
		title: '操作',
		key: 'operation',
		dataIndex: 'operation',
		scopedSlots: { customRender: 'operation' },
		// align: 'center',
		width: 200,
		fixed: 'right'
	}
];
export default {
	name: 'rolelist',
	mixins: [rowSelection, recordOperation],
	components: {
		roleJoinMenuModal,
		addOrEditRoleModal,
		editRoleDataModal
	},
	data() {
		return {
			columns: columns,
			filter: {},
			api: sysManageapi.roleUrl
		};
	},
	created() {
		if (this.isAdmin) {
			this.getAllOrgList();
		}
	},
	methods: {
		getAllOrgList() {
			this.$postAction(sysManageapi.orgUrl.getAllList).then(res => {
				if (res && res.code == 1) {
					// this.orgList = res.data;
				}
			});
		},

		/* 分配菜单权限*/
		setRoleMenu(record) {
			this.$refs.roleJoinMenuModal.show(record);
		},
		/* 分配数据权限 */
		setRoleDateScope(record) {
			this.$refs.editRoleDataModal.show(record);
		},
		/* 分配用户 */
		setRoleUser(record) {
			this.$router.push({
				path: '/sysManage/userByrole',
				query: {
					roleId: record.roleId
				}
			});
		}
	}
};
</script>

<style scoped="scoped" lang="less"></style>
